<template>
  <div>

    <!-- 头部开始 -->
    <myheader/>
    <!-- 头部结束 -->

    <div class="udlite-container partners">
        <van-cell-group>
            <van-field v-model="username" label='用户名' placeholder="请输入用户名"/>
            
            <van-field v-model="password" label='密码' placeholder="请输入密码"/>

            <van-field v-model="password1" label='确认密码' placeholder="请输入确认密码"/>

            <van-field v-model="phone" label='手机号' placeholder="请输入手机号"/>

            <van-button type='primary' @click="submit">注册</van-button>
        
            <van-button type='info'>重置</van-button>

            
        </van-cell-group>
    </div>

    <!-- 表单区域 -->
    
  </div>
</template>

<script>
import myheader from './myheader.vue'
export default {

    data(){
        return{
            username:'',
            password:'',
            password1:'',
            phone:'',
        }
    },
    // 声明组件
    components:{
        'myheader':myheader
    },
    mounted:function(){

    },
    methods:{
        submit:function(){
            if(this.username==''){
                this.$roast('请填写用户名')
                return false;
            }
            if(this.password==''){
                this.$roast('请填写密码')
                return false;
            }
            if(this.phone==''){
                this.$roast('请填写手机号')
                return false;
            }

            if(this.password1==this.password){
                let parm=new FormData()
                parm.append('username',this.username)
                parm.append('password',this.password)
                parm.append('phone',this.phone)
                this.axios.post('http://localhost:8000/register/',parm).then((response)=>{
                    console.log(response)
                })
            }  
        },
        
    }
}
</script>

<style>

</style>